<template>
	<view>
		<swiper class="swiper"
		:indicator-dots="indicatorDots" 
		:current='current'
		:interval="interval" 
		:style="{height:swiperHeight}"
		@change='changeImg'>
			<swiper-item v-for="(item,index) in itemData.data" :key="index" @click="gotoPages(item)" >
				<image :src="item.imgUrl" :data-index='index' mode="widthFix" @click="previewImage(index)" @load='handleImg' lazy-load='true' :style="{height:imgList[current]}"></image>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
	data(){
			return{
				indicatorDots: true,
				autoplay: false,
				duration: 500,
				interval: 2000,
				indicatorActiveColor:'#ffffff',
				customBarH:'',
				swiperHeight:'',
				imgList:[] /*图片的高度列表*/,
				current:0
			}
		},
		props:['itemData','height'],
		mounted(){
			this.showImg()
		},
		methods:{
			/*跳转页面*/
			gotoPages(e){
				this.gotoPage(e.linkUrl);
			},
			showImg(){
				this.$nextTick(()=>{
					this.imgList[0]=this.itemData.height
					this.swiperHeight=this.imgList[0]
				})
			},
			handleImg(e){
				 let winWid = uni.getSystemInfoSync().windowWidth;              
				  let imgh = e.detail.height;　　　　　　　　　　　　　　　　
				  let imgw = e.detail.width;
				  let index=e.currentTarget.dataset.index
				  let swiperH = winWid * imgh / imgw +'px'
				  this.imgList[index]=swiperH
				 // this.swiperHeight=swiperH
			},
			changeImg(e){
				this.current=e.detail.current
				this.swiperHeight=this.imgList[this.current]
				
			},
			}
	}
</script>

<style>

</style>
